import React from 'react'
import {Select, Table, Tag, Modal, Divider, Popconfirm} from 'antd'
import TagList from './tag-list';
import {FormattedMessage} from 'react-intl'

const Option = Select.Option;

export default class StudentList extends React.Component {
  state = {
    students: [],
    visible: false,
    student: {},
    selectedGroups: []
  }

  handleEditGroup(student) {
    this.props.refreshGroups()
    const selectedGroups = student.groups.map(item => item.name)
    this.setState({student, visible: true, selectedGroups: selectedGroups})
  }

  handleSubmitGroups() {
    const {selectedGroups, student} = this.state
    this.props.editStudentGroups(selectedGroups, student.id)
    this.setState({visible: false})
  }

  removeFromProgram(id,type) {
    this.props.removeFromProgram(id, type)
  }
  render() {
    const columns = [{
      title: 'ID',
      dataIndex: 'id',
    }, {
      title: <FormattedMessage id='姓名'/>,
      dataIndex: 'name',
    }, {
      title: <FormattedMessage id='用户名'/>,
      dataIndex: 'username',
    }, {
      title: <FormattedMessage id='手机号'/>,
      dataIndex: 'mobilePhone',
    }, {
      title: <FormattedMessage id='邮箱'/>,
      width: 200,
      dataIndex: 'email',
    }, {
      title: 'Group',
      dataIndex: 'groups',
      render: (text) => {
        return text.map(item => <Tag key={item.id}>{item.name}</Tag>)
      }
    }, {
      title: 'actions',
      dataIndex: 'actions',
      render: (text, record) => {
        return <span>
                  <a onClick={this.handleEditGroup.bind(this, record)}><FormattedMessage id='编辑Group'/></a>
                  <Divider type="vertical"/>

                  <Popconfirm title="Are you sure remove this user?"
                              onConfirm={this.removeFromProgram.bind(this,record.id,'student')}>
                        <a><FormattedMessage id='移除该训练营'/></a>
                  </Popconfirm>
              </span>
      }
    }];

    const {students, groups} = this.props
    const {visible, student, selectedGroups} = this.state
    const name = student.name ? student.name : student.username
    const groupsData = groups.map(item => <Option key={item.name}>{item.name}</Option>)

    return <div>
      <Table dataSource={students} columns={columns} bordered rowKey={record => record.id}/>
      <Modal
        visible={visible}
        title={`${name}`}
        onOk={this.handleSubmitGroups.bind(this)}
        okText={<FormattedMessage id='确定'/>}
        cancelText={<FormattedMessage id='取消'/>}
        onCancel={() => this.setState({visible: false})}
      >
        <div>
          <label><FormattedMessage id='全部'/>：</label>
          <TagList tags={groups}/>
        </div>

        <Divider dashed/>

        <Select
          mode="tags"
          style={{width: '100%'}}
          value={selectedGroups}
          onChange={(selectedGroups) => this.setState({selectedGroups: selectedGroups})}
        >
          {groupsData}
        </Select>
      </Modal>
    </div>
  }

}
